<template>
    <div>
        <div class="edittable-table-height-con">
            <Table :columns="slideTableHead" :data="anchorList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
        </div>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
        <Modal v-model="identityVatity" title="实名资料详情" @on-ok="handleSubmit('identityModel')" @on-cancel="handleReset('identityModel')">
            <div><span class="wai_model"><label class="nei_model">* </label>姓名: </span><label style="text-decoration:underline;">{{identityModel.name}}</label></div>
            <div><span class="wai_model"><label class="nei_model">*
                </label>性别: </span>
                <label style="text-decoration:underline;" v-if="identityModel.sex===0">女</label>
                <label style="text-decoration:underline;" v-else-if="identityModel.sex===1">男</label>
            </div>
            <div><span class="wai_model"><label class="nei_model">* </label>身份证号码: </span><label style="text-decoration:underline;">{{identityModel.idCard}}</label></div>
            <div><span class="wai_model"><label class="nei_model">* </label>手机号码: </span><label style="text-decoration:underline;">{{identityModel.mobile}}</label></div>
            <div><span class="wai_model" style="vertical-align:top"><label class="nei_model">* </label>身份证正面: </span><label style="text-decoration:underline;"><img :src=identityModel.positivePath style="width: 100px;height: 70px" @click="seekPoBigImg"/></label></div>
            <div><span class="wai_model" style="vertical-align:top"><label class="nei_model">* </label>身份证反面: </span><label style="text-decoration:underline;"><img :src=identityModel.reversePath style="width: 100px;height: 70px" @click="seekSeBigImg"/></label></div>
            <div><span class="wai_model"><label class="nei_model">* </label>申请时间: </span><label style="text-decoration:underline;">{{identityModel.applyTime}}</label></div>
            <div><span class="wai_model"><label class="nei_model">*
                </label>状态: </span>
                <label style="text-decoration:underline;" v-if="identityModel.status===0">审核中</label>
                <label style="text-decoration:underline;" v-else-if="identityModel.status===1">已通过</label>
                <label style="text-decoration:underline;" v-else-if="identityModel.status===2">未通过</label>
            </div>
            <div><span class="wai_model"><label class="nei_model">* </label>操作: </span><label style="text-decoration:underline;">
                <Select v-model="identityModel.status" style="width:100px">
                    <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </label></div>
        </Modal>

        <Modal v-model="option1.showCropedImage">
            <p slot="header">身份证大图</p>
            <img :src="option1.cropedImg" alt="" v-if="option1.showCropedImage" style="width: 100%;">
        </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '会员编号',
                        align: 'center',
                        key: 'mIdNo',
                        "sortable": true,
                    },
                    {
                        title: '主播编号',
                        align: 'center',
                        key: 'anchorId',
                        "sortable": true,
                    },
                    {
                        title: '昵称',
                        align: 'center',
                        key: 'nickName',
                    },
                    {
                        title:'性别',
                        key:'sex',
                        width:'80px',
                        align:'center',
                        filters: [
                            {label: '女',value: 0},
                            {label: '男',value: 1},
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.sex === 0;
                            } else if (v === 1) {
                                return r.sex === 1;
                            }
                        },
                        render(h,params,index){
                            const row = params.row;
                            if(row.sex==0){
                                return "女";
                            }else if(row.sex==1){
                                return "男";
                            }
                        },
                    },
                    {
                        title: '城市',
                        align: 'center',
                        key: 'city',
                    },
                    {
                        title:'缩略图',
                        width:"100px",
                        align: 'center',
                        className:'thumbnail',
                        render: (h, params) => {
                            const row = params.row;
                            const thumbnail = row.thumbnail;
                            return h('img', {
                                attrs: {
                                    src:thumbnail,
                                },
                                style:{
                                    width:"100px",
                                    height:'50px'
                                }
                            });
                        }
                    },
                    {
                        title: '标签',
                        align: 'center',
                        key: 'tag',
                    },
                    {
                        title: '主播公告',
                        align: 'center',
                        key: 'notice',
                    },
                    {
                        title: '粉丝徽章',
                        align: 'center',
                        key: 'FBG',
                    },
                    {
                        title:'主播状态',
                        key:'status',
                        width:'100px',
                        align:'center',
                        filters: [
                            {label: '禁播',value: -1},
                            {label: '申请',value: 0},
                            {label: '正常',value: 1},
                            {label: '申请驳回',value: 2},
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === -1) {
                                return r.status === -1;
                            } else if (v === 0) {
                                return r.status === 0;
                            }else if (v === 1) {
                                return r.status === 1;
                            }else if (v === 2) {
                                return r.status === 2;
                            }
                        },
                        render(h,params,index){
                            const row = params.row;
                            if(row.status==-1){
                                return "禁播";
                            }else if(row.status==0){
                                return "申请";
                            }else if(row.status==1){
                                return "正常";
                            }else if(row.status==2){
                                return "申请驳回";
                            }
                        },
                    },
                    {
                        title: '主播等级',
                        align: 'center',
                        key: 'level',
                    },
                    {
                        title: '会员等级',
                        align: 'center',
                        key: 'memberLevel',
                    },
                    {
                        title:'是否实名',
                        key:'isId',
                        width:'100px',
                        align:'center',
                        filters: [
                            {label: '审核中',value: "0"},
                            {label: '已通过',value: "1"},
                            {label: '未通过',value: "2"},
                            {label: '未实名',value: "null"}
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === "0") {
                                return r.isId === "0";
                            } else if (v === "1") {
                                return r.isId === "1";
                            }else if (v === "2") {
                                return r.isId === "2";
                            }else if (v === "null") {
                                return r.isId === "null";
                            }
                        },
                        render(h,params,index){
                            const row = params.row;
                            if(row.isId=="0"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#ff9900'
                                        },
                                    }, '审核中'),
                                ]);
                            }else if (row.isId=="1"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#19be6b'
                                        },
                                    }, '已通过'),
                                ]);
                            }else if (row.isId=="2"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#ed3f14'
                                        },
                                    }, '未通过'),
                                ]);
                            }else if (row.isId=="null"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#990000'
                                        },
                                    }, '未实名'),
                                ]);
                            }
                        },
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 190,
                        align: 'center',
                        render: (h, params) => {
                            const row=params.row;
                            if(row.status==-1 && (row.isId==1 || row.isId==0 || row.isId==2)){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.upAnchorState(params.index,-1)
                                            }
                                        }
                                    }, '解封'),
                                    h('Button', {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.seekIdentity(params.index)
                                            }
                                        }
                                    }, '查看实名')
                                ]);
                            }else if(row.status==-1 && (row.isId=="null" || row.isId=="")){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.upAnchorState(params.index,-1)
                                            }
                                        }
                                    }, '解封'),
                                ]);
                            }
                            else if(row.status==0 && (row.isId==1 || row.isId==0 || row.isId==2)){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.upAnchorState(params.index,0)
                                            }
                                        }
                                    }, '通过'),
                                    h('Button', {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.seekIdentity(params.index)
                                            }
                                        }
                                    }, '查看实名')
                                ]);
                            }

                            else if(row.status==0 && row.isId=="null" || row.isId==""){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'warning',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.upAnchorState(params.index,0)
                                            }
                                        }
                                    }, '通过')
                                ]);
                            } else if(row.status==1 && (row.isId==1 || row.isId==0 || row.isId==2)){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.upAnchorState(params.index,1)
                                            }
                                        }
                                    }, '禁播'),
                                    h('Button', {
                                        props: {
                                            type: 'info',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.seekIdentity(params.index)
                                            }
                                        }
                                    }, '查看实名')
                                ]);
                            }

                            else if(row.status==1 && row.isId=="null" || row.isId==""){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.upAnchorState(params.index,1)
                                            }
                                        }
                                    }, '禁播')
                                ]);
                            }
                            else if(row.status==2 && (row.isId==1 || row.isId==0 || row.isId==2)){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        on: {
                                            click: () => {
                                                this.seekIdentity(params.index)
                                            }
                                        }
                                    }, '查看实名')
                                ]);
                            }
                            else if(row.status==2 && row.isId=="null" || row.isId==""){
                                return h('div', [])
                            }
                        }
                    }
                ],
                selectURl:'/anchor/list',
                upStateURl:'/anchor/change',
                seekIdentityURl:'/member/identity',
                upIdentityStateURl:'/member/identify',
                tipeNews:'暂无数据',
                identityVatity:false,
                identityModel:{},
                anchorList:[],
                stateList: [
                    {
                        value: 0,
                        label: '审核中'
                    },
                    {
                        value: 1,
                        label: '已通过'
                    },
                    {
                        value: 2,
                        label: '未通过'
                    }
                ],
                option1: {
                    showCropedImage: false,
                    cropedImg: ''
                },
                total:0,
                pageSize:0,
                page:1,
            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self=this;
                self.$axios.get(self.selectURl+'?curr='+self.page).then((res) => {
                    self.anchorList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            upAnchorState(index,e){
                let self=this;
                if (e == -1){
                    self.$axios.post(self.upStateURl+'?anchorId='+self.anchorList[index].anchorId+'&status=1').then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('解封成功！！！');
                            this.getData();
                        }else {
                            self.$Message.error('抱歉，请稍后重试!');
                        }
                    })
                }else if(e == 1){
                    self.$axios.post(self.upStateURl+'?anchorId='+self.anchorList[index].anchorId+'&status=-1').then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('禁播成功！！！');
                            this.getData();
                        }else {
                            self.$Message.error('抱歉，请稍后重试!');
                        }
                    })
                }else if(e == 0){
                    self.$axios.post(self.upStateURl+'?anchorId='+self.anchorList[index].anchorId+'&status=1').then((res) => {
                        if (res.data.code==200){
                            self.$Message.success('申请通过成功！！！');
                            this.getData();
                        }else {
                            self.$Message.error('抱歉，请稍后重试!');
                        }
                    })
                }
            },
            seekIdentity(index){
                let self=this;
                let memberModel = self.anchorList[index];
                self.$axios.get(self.seekIdentityURl+'/'+memberModel.mId).then((res) => {
                    self.identityModel = res.data.data;
                    let stime = res.data.data.applyTime;
                    self.identityModel.applyTime = new Date(parseInt(("/Date("+stime+")/").substr(6, 13))).toLocaleDateString();
                    self.identityVatity = true;
                })

            },
            seekPoBigImg(){
                let self=this;
                self.option1.cropedImg = self.identityModel.positivePath;
                self.option1.showCropedImage = true;
            },
            seekSeBigImg(){
                let self=this;
                self.option1.cropedImg = self.identityModel.reversePath;
                self.option1.showCropedImage = true;
            },
            handleSubmit (name) {
                let self=this;
                self.$axios.post(self.upIdentityStateURl+'?mId='+self.identityModel.memberId+'&status='+self.identityModel.status).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，修改成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，修改失败。请稍后重试!');
                        self.getData();
                    }
                });
            },
            handleReset (name) {
                this.identityVatity=false;
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }
        }

    }
</script>
<style>
    .wai_model{
        display: inline-block;
        width: 100px;
        text-align: right;
        padding-right: 20px;
    }
    .nei_model{
        color: red;
        width: 130px;
    }
</style>